(function(factory) {
	if (typeof define === "function" && define.amd) {
		// AMD. Register as an anonymous module.
		define(['HteOS/desktop/DragDrop'],factory);
	} else {
		// Browser globals
		factory();
	}
}(function() {
	HteOS.desktop.View = {
		
		init : function(){
			
			var view = this;
			
			this.render();
			HteOS.desktop.DragDrop.init();
			HteOS.EventManager.on("hte.app.hide",function(app){
				view.getShortcut(app.id).hide();
				view.position();
			});
			HteOS.EventManager.on("hte.app.show",function(app){
				view.getShortcut(app.id).show();
				view.position();
			});
			HteOS.EventManager.on("hte.app.uninstall",function(app){
				view.removeShortcut(app);
			});
			HteOS.EventManager.on("hte.app.install",function(app){
				view.addShortcut(app);
			});
		},
		
		margin :15,
		
		padding:10,
		
		apps : [],
		
		indexes : {},
		
		tpl : HteOS.Template.compile("<div id=\"hte-shortcut-<%=id%>\" class=\"hte-shortcut\">"
				+"<div class=\"hte-shortcut-icon\">"
					+ "<img src=\"<%=icon%>\">" 
				+ "</div>" 
				+ "<div class=\"hte-shortcut-name\"><%=name%></div>"
				+"</div>"),
		
		render : function(){
			var apps = HteOS.app.AppManager.apps,view = this;
			var index = 0,array = [];
			
			HteOS.each(apps,function(app,id){
				array.push(app);
			})
			/*for(var id in apps) {
				array.push(apps[id]);
			}*/
			array.sort(function(a, b) {
				if(a.shortcutIndex > b.shortcutIndex) {
					return 1;
				}
				return -1;
			});
			
			array.forEach(function(app){
				var el = $(view.tpl(app));
				el.data("appId",app.id);
				if(app.hidden == true){
					el.hide();
				}
				el.appendTo($(".hte-desktop-container"));
				if(!HteOS.UA.Mobile){
					el.css({
						top : 0,
						left : 0,
						opacity : 0
					});
				}
				view.apps.push(app.id);
				view.indexes[app.id] = index;
				index ++;
			});
			//window.setTimeout(function(){	
				//view.position();
			//},100);
		},
		
		position : function(){
			
			if(HteOS.UA.Mobile){
				return false;
			}
			
			var containerHeight = $(".hte-desktop-container").height();
			var column = 0,index = 0;margin = this.margin,padding = this.padding;
			var apps = this.apps,view = this;
			
			apps.forEach(function(app){
				var shortcut = view.getShortcut(app);
				if(!shortcut.is(":hidden")){
					var height = shortcut.height();
					var lastHeight = (index+1) * height + (index +1) * margin + padding * 2;
					if(lastHeight >  containerHeight){
						index = 0;
						column ++;
					}
					var top = index * shortcut.height() + (index + 1) * margin + padding;
					var left = column * shortcut.width() + (column + 1) * margin + padding;
					shortcut.css({
						top : top,
						left : left,
						opacity : 1
					});
					index ++;
				}
			});
			this.index = index;
			this.column = column;
		},
		
		updateIndex : function(){
			var apps = this.apps,indexes = this.indexes, changes = {},hasChange;
			apps.forEach(function(app,index){
				var oldIndex = indexes[app];
				if(oldIndex != index){
					changes[app] = index;
					hasChange = true;
				}
				indexes[app] = index;
			});
			if(hasChange === true){
				HteOS.EventManager.trigger("hte.desktop.shortcut.index.change",changes);
			}
		},
		
		insert : function(source,target,position){
			var index = this.apps.indexOf(target);
			if(position == 'after' && index > 0){
				index += 1;
			}
			this.apps.remove(source);
			this.apps.insert(source,index);
			this.updateIndex();
			this.refresh();
		},
		
		removeShortcut : function(app){
			this.getShortcut(app.id).remove();
			this.apps.remove(app.id);
			this.updateIndex();
		    this.position();
		},
		
		addShortcut : function(app){
			var el = $(this.tpl(app));
			el.data("appId",app.id);
			el.appendTo($(".hte-desktop-container"));
			this.apps.push(app.id);
			this.updateIndex();
			this.position();
		},
		
		getShortcut : function(appId){
			return $("#hte-shortcut-" + appId);
		},
		
		refresh : function(){
			this.position();
		}
	}
}));